/* = STATES  */
$border-dark-side: rgba(0,0,0,0.7);
$border-light-side: rgba(255,255,255,0.3);

.is-loading {
	position: relative;

	min-width: 40px;
	@include transition(width 300ms);

	.label-text {
		opacity: 0.5;
		@include transition(opacity 300ms);
	}

	&:after {
		display: block;
		position: absolute;
		width: 20px;
		height: 20px;
		top: 50%;
		left: 50%;
		margin-top: -10px;
		margin-left: -10px;
		@include animation(rotate .6s linear infinite);
		@include border-radius(100%);
		border-top: 2px solid $border-dark-side;
		border-bottom: 2px solid $border-light-side;
		border-left: 2px solid $border-dark-side;
		border-right: 2px solid $border-light-side;
		content: '';
		opacity: .5;
	}

	&:focus {
		outline: 0px;
	}
}

@include keyframes(rotate) {
	0% { @include transform(rotateZ(-360deg)); }
	100% { @include transform(rotateZ(0deg)); }
}